<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员管理</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
</bod>
<div id="main">

  <div id="heard" src="../img/register.gif">
  </div>

  <div id="body">
    <input type="text" v-model="searchKey" placeholder="输入搜索成员的姓名"
           style="border-color: red; margin-left: 510px; margin-top: 200px; height: 30px;
            width: 241px;">
  </div>
<!--border-color: blue;  height: 100px; background: blue;border: 3px; -->
  <div id="list" style=" width: 241px; margin: auto;">
    <ul>
      <li v-for="mess in Text" >{{mess}}</li>
    </ul>
  </div>
</div>

<script>
  var data=[
    "单和霖",
    "高东飞",
    "贾倩璞",
    "王泽超",
    "王宇强",
    "王海新",
    "刘佳坤",
    "孟繁君",
    "赵浩章",
    "张武阳"
  ];
</script>

<script>
  var demo = new Vue({
    el:"#main",
    data:{
      mess:data,
      searchKey:""
    },
    computed:{
      Text:function(){
        var array=this.mess;
        searchKey=this.searchKey;
        if(!searchKey){
          return array;
        }else{
        searchKey=this.searchKey.trim().toLowerCase();
        //对mess进行遍历
        Text=this.mess.filter(function(value){
          //mess的每一个值与searchKey进行模糊对比
          if(value.toLowerCase().indexOf(searchKey)!==-1){
            return value;
          }
        });
        return Text;
        }

      }
    },
  })
</script>
</body>

</html>
